<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>图片切换</title>
  <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
  <div id="swipper">
    <div class="center">
      <!-- 图片 -->
      <img class="cover" :src="imgs[index]" alt="" />
      <!-- 左箭头 -->
      <a href="javascript:void(0)" class="left" @click="prev" v-show="index > 0">
        <img src="./images/prev.png" alt="" />
      </a>
      <!-- 右箭头 -->
      <a href="javascript:void(0)" class="right" @click="next" v-show="index < imgs.length - 1">
        <img src="./images/next.png" alt="" />
      </a>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#swipper',
      data: {
        index: 0,
        imgs: [
          'https://game.gtimg.cn/images/yxzj/img201606/heroimg/155/155-mobileskin-1.jpg',
          'https://game.gtimg.cn/images/yxzj/img201606/heroimg/174/174-mobileskin-1.jpg',
          'https://game.gtimg.cn/images/yxzj/img201606/heroimg/141/141-mobileskin-1.jpg',
          'https://game.gtimg.cn/images/yxzj/img201606/heroimg/149/149-mobileskin-1.jpg',
          'https://game.gtimg.cn/images/yxzj/img201606/heroimg/115/115-mobileskin-1.jpg'
        ],
      },
      methods: {
        next() {
          this.index++
        },
        prev() {
          this.index--
        },
      },
    })
  </script>
</body>

</html>